<template>
    <div>
        <headerBox></headerBox>
        <div class="grid-container">
            <div class="left-item">
                <div class="top-item">
                    <div class="grid-item aa">
                        <emergency
                            :emergencyObj="activities"
                            emergencyTitle="突发事件"
                        ></emergency>
                    </div>
                    <div class="grid-item bb">
                        <h3 class="echart-title">
                            近7日城市地域热点热力图
                        </h3>
                        <shenzhenMap></shenzhenMap>
                    </div>
                    <div class="grid-item cc">
                        <emergency
                            :emergencyObj="activities2"
                            emergencyTitle="乘客之声"
                        ></emergency>
                    </div>
                    <div class="grid-item dd">
                        <emergency
                            :emergencyObj="activities3"
                            emergencyTitle="运营服务"
                        ></emergency>
                    </div>
                </div>
                <div class="bottom-item">
                    <div class="grid-item ">
                        <h3 class="echart-title">
                            舆情热词
                        </h3>
                        <img
                            src="../assets/wordCloud.png"
                            alt=""
                            class="wordCloud"
                        />
                    </div>
                    <div class="grid-item ">
                        <h3 class="echart-title">
                            数据来源
                        </h3>
                        <dataSourceModel></dataSourceModel>
                    </div>
                    <div class="grid-item ">
                        <h3 class="echart-title">
                            舆情画像
                        </h3>
                        <pieModel></pieModel>
                    </div>
                </div>
            </div>
            <div class="right-item">
                <div class="grid-item">
                    <h3 class="echart-title">
                        近24小时内轨道交通正负面信息统计
                        <span>（条/小时）</span>
                    </h3>
                    <consensusModel></consensusModel>
                </div>
                <div class="grid-item">
                    <h3 class="echart-title">
                        近7日舆情数据分布趋势
                        <span>（数量/日期）</span>
                    </h3>
                    <tendencyModel></tendencyModel>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import headerBox from '../components/header-box2';
import emergency from '../components/emergency';
import pieModel from '../components/pieModel';
import tendencyModel from '../components/tendency';
import consensusModel from '../components/consensus';
import dataSourceModel from '../components/dataSource';
import shenzhenMap from '../components/shenzhenMap';
export default {
    components: {
        headerBox,
        emergency,
        pieModel,
        tendencyModel,
        consensusModel,
        dataSourceModel,
        shenzhenMap
    },
    data() {
        return {
            activities: [
                {
                    content:
                        '车厢内1名乘客晕倒靠在旁边乘客身上，引发周边乘客情绪不稳，部分乘客在撤离时发生踩踏。',
                    timestamp: '2018-04-15 12:12:12',
                    color: '#DE6173'
                },
                {
                    content:
                        '深圳地铁14号线因车辆故障，肿瘤医院往大运方向列车限速运行。',
                    timestamp: '2018-04-15 12:12:12',
                    color: '#DE6173'
                }
            ],
            activities2: [
                {
                    content:
                        '下地铁的时候，门口的人玩手机站着一动不动，也不知道让一下，很是无语。',
                    timestamp: '2018-04-15 12:12:12',
                    color: '#0bbd87'
                },
                {
                    content:
                        '深圳地铁还是很贴心的，尤其对于我这种颈椎病不能吹冷风的人，点赞。',
                    timestamp: '2018-04-15 12:12:12',
                    color: '#0bbd87'
                }
            ],
            activities3: [
                {
                    content:
                        '清明假期机票价格下降，深圳多条地铁线或延长运营加开临客。',
                    timestamp: '2018-04-15 12:12:12',
                    color: '#323FFF'
                },
                {
                    content:
                        '为推进深圳夜间经济的发展，深圳将延长深圳地铁夜间运营时间。',
                    timestamp: '2018-04-15 12:12:12',
                    color: '#323FFF'
                }
            ]
        };
    }
};
</script>

<style lang="scss" scoped>
.grid-container {
    display: grid;
    grid-template-columns: 1fr 24%;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    height: calc(100vh - 80px);
    margin-top: 10px;
    padding: 0 10px;
    .grid-item {
        font-size: 20px;
        background: #121626;
        overflow: hidden;
    }
    .left-item {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 245px;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        height: calc(100vh - 80px);
        .top-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            grid-template-areas:
                'aa bb'
                'cc bb'
                'dd bb';
            height: calc(100vh - 340px);
        }
        .bottom-item {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            height: 245px;
        }
    }
    .right-item {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    .aa {
        grid-area: aa;
    }
    .bb {
        grid-area: bb;
    }
    .cc {
        grid-area: cc;
    }
    .dd {
        grid-area: dd;
    }
    .wordCloud {
        margin-top: 20px;
    }
}
</style>
